// import React, { useState, useReducer } from "react";
// import ReactDOM from "react-dom";
import { useReducer } from "./components/kreact/react";
import ReactDOM from "./components/kreact/react-dom";
// import "./index.css";

// fiber.memeorizedState(hook0)->next(hook1)->next(hook2)->next(hook3)(workInProgressHook)
// workInProgressHook
function FunctionComponent(props) {
  // const [count, setCount] = useState(0); //hook0
  const [count2, setCount2] = useReducer((x) => x + 1, 0); // hook1
  const [count3, setCount3] = useReducer((x) => x + 1, 0); //hook2

  return (
    <div className="border">
      <p>{props.name}</p>
      {/* <p>{count}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        click
      </button> */}

      <p>{count2}</p>
      <button
        onClick={() => {
          setCount2(count2 + 1);
        }}
      >
        click
      </button>
      <p>{count3}</p>
      <button
        onClick={() => {
          setCount3(count3 + 1);
        }}
      >
        click
      </button>
    </div>
  );
}

const jsx = (
  <div className="border">
    <h1>全栈</h1>
    <a href="https://www.baidu.com/">baidu</a>
    <FunctionComponent name="FunctionComponent" />
    {/* 
    <>
      <h1>omg</h1>
      <h2>omg</h2>
    </> */}
  </div>
);

ReactDOM.render(jsx, document.getElementById("root"));

// console.log("React", React.version); //sy-log

// ! 原生标签
// 文本节点
// 函数组件
// 类组件
// Fragment
